import { getContext } from '@/context/common/applicationContext'
import React, { useState } from 'react'
import { Badge } from 'antd'
import { BellOutlined } from '@ant-design/icons'
import MessageDrawer from './MessageDrawer'

/**
 * 消息提示图标
 * @author liu_jshan
 * @version 1.0 20240502
 * @param {Object} props 
 * @returns 
 */
function MessageBadge(props) {
    const [drawerVisual, setDrawerVisual] = useState(false)
    return (
        <>
            <div style={props.style}>
                <Badge
                    count={props.userMessage.unreadMessage ? props.userMessage.unreadMessage.length : 0}
                    overflowCount={props.overflowCount ? props.overflowCount : 99}
                    size={props.size ? props.size : 'small'}
                    offset={props.offset ? props.offset : [3, -3]}
                >
                    <BellOutlined
                        style={{ fontSize: '1.2em', cursor: 'pointer' }}
                        onClick={() => {
                            setDrawerVisual(true)
                        }}
                    />
                </Badge>
            </div>
            <MessageDrawer 
                drawerVisual={drawerVisual}
                onClose={() => {setDrawerVisual(false)}}
            ></MessageDrawer>
        </>
    )
}
export default getContext(MessageBadge)
